<template>
	<view class="exchangeSucceed">
		<top-bar :home="false" backState="2000" :transparentFixedFontColor="topTabFontColor" :type="topTabType" title="兑换成功"></top-bar>
		<view class="exchangeSucceedBox" :style="{ paddingTop: (statusBarHeight*2+136) + 'rpx' }">
			<view class="eSucceedContBox">
				<view class="insetBox">
					<image class="eSucceedTit" src="https://lovebirdopen.com/static/img/recruitOfficer/eSucceedTit.png" mode=""></image>
					<view class="tips1">恭喜您</view>
					<view class="tips1">获得500毫升九仙御贡一瓶！</view>
					<image class="winePattern" src="https://lovebirdopen.com/static/img/recruitOfficer/winePattern.svg" mode=""></image>
					<view class="tips2">提交收货地址，第一时间收到福酒</view>
					<view class="tips3">如不填写，客服小九将无法将福酒送到</view>
					<view class="fillGoBtn">填写地址</view>
				</view>
			</view>
		</view>
		<view class="addQRCode">
			<image class="cloud1" src="https://lovebirdopen.com/static/img/recruitOfficer/cloud1.png" mode=""></image>
			<image class="cloud2" src="https://lovebirdopen.com/static/img/recruitOfficer/cloud2.png" mode=""></image>
			<view class="codeBox">
				<image class="codeImg" src="https://lovebirdopen.com/static/img/recruitOfficer/codeImg.png" mode=""></image>
				<view class="codeTips">添加御贡优品客服二维码，获取更多福利信息！</view>
			</view>
			<view class="tips">更多解释权归叁思数媒所有</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 顶部导航样式
				topTabType:'transparentFixed',
				topTabFontColor:'#fff',
				// 导航栏高度
				statusBarHeight: 0,
			}
		},
		onLoad: function (option) {
			
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		onPageScroll(e) {//滚动顶部导航的变化
			if(e.scrollTop>50){
				this.topTabType = 'fixed';
				this.topTabFontColor = '';
			}
			if(e.scrollTop < 50){
				this.topTabType = 'transparentFixed';
				this.topTabFontColor = '#fff';
			}
	
		},
		methods: {
			// 活动规则1&我的奖品2  跳转
			linkGo(index){
				
			},
		}
	}
</script>

<style lang="scss">
	.exchangeSucceed{
		min-height: 100%;
		background: radial-gradient(68.24% 68.24% at 50% 100%, rgba(249, 237, 209, 0.8) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #FCAF89 0%, #FF3E3E 100%);
	}
	.exchangeSucceedBox{
		padding-bottom: 158rpx;
		background: url('https://lovebirdopen.com/static/img/recruitOfficer/exchangeSucceedBoxBj.png') no-repeat;
		background-size: 100% 100%;
		
		.eSucceedContBox{
			width: 602rpx;
			height: 868rpx;
			margin: 0 auto;
			padding: 4rpx;
			background: linear-gradient(180deg, #F1743F 0%, #FF472E 100%);
			border: 4rpx solid #FFF3C7;
			border-radius: 40rpx;
			
			.insetBox{
				width: 100%;
				height: 100%;
				padding-top: 72rpx;
				text-align: center;
				background: #FFF9F2;
				box-shadow: inset 0px 0px 8rpx #F05251;
				border-radius: 34rpx;
				
				.eSucceedTit{
					width: 480rpx;
					height: 151rpx;
					margin: 0 auto 80rpx;
				}
				.tips1{
					font-weight: 900;
					font-size: 36rpx;
					line-height: 48rpx;
					color: #ED4B34;
				}
				.winePattern{
					width: 522rpx;
					height: 40rpx;
					margin: 80rpx auto 37rpx;
				}
				.tips2{
					margin-bottom: 32rpx;
					font-size: 28rpx;
					line-height: 36rpx;
					color: #333333;
				}
				.tips3{
					margin-bottom: 48rpx;
					font-size: 28rpx;
					line-height: 36rpx;
					color:#923723;
				}
				.fillGoBtn{
					width: 328rpx;
					height: 96rpx;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 900;
					font-size: 36rpx;
					color: #FFF2D8;
					background: linear-gradient(180deg, #F16A3F 0%, #E82727 100%);;
					box-shadow: inset 0px -6rpx 2rpx rgba(0, 0, 0, 0.1);
					border-radius: 78rpx;
				}
			}
		}
	}
	.addQRCode{
		position: relative;
		width: 100%;
		height: 456rpx;
		margin-top: -82rpx;
		padding: 40rpx 52rpx 0;
		background: #FFF9F2;
		
		.cloud1{
			position: absolute;
			top: 180rpx;
			right: 0;
			width: 234rpx;
			height: 158rpx;
		}
		.cloud2{
			position: absolute;
			top: 284rpx;
			left: 0;
			width: 150rpx;
			height: 122rpx;
		}
		.codeBox{
			width: 100%;
			margin-bottom: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.codeImg{
				width: 240rpx;
				height: 240rpx;
				margin-right: 70rpx;
			}
			.codeTips{
				flex: 1;
				width: 1px;
				font-weight: 900;
				font-size: 28rpx;
				line-height: 36rpx;
				color: #333333;
			}
		}
		.tips{
			font-size: 24rpx;
			line-height: 36rpx;
			color: #FADAB0;
			text-align: center;
		}
	}
</style>
